<m-card>
    <ng-container card-head>
        <div class="d-flex align-items-center justify-content-between w-100">
            <div class="g-card-title" *ngIf="readonly">
                {{ label }}
            </div>
            <div class="g-card-title" *ngIf="!readonly">
                <ng-container *ngFor="let scene of scenes">
                    <span (click)="onClickTitle(scene.scene_code)" class="mr-3 scene"
                        [class.active]="currentScene===scene.scene_code">{{scene.scene_name}}</span>
                </ng-container>
            </div>
            <ng-container *ngIf="editing; else editBtnRef">
                <div>
                    <button class="btn btn-secondary mr-3" (click)="disableForm();switchScene()">取消</button>
                    <button class="btn btn-primary abcdefghi" (click)="submit()">保存</button>
                </div>
            </ng-container>
            <ng-template #editBtnRef>
                <button class="btn btn-primary" *ngIf="!readonly" (click)="enableForm()"
                    [disabled]="!canEdit">编辑配置</button>
            </ng-template>
        </div>
    </ng-container>
    <div class="mb-3 btn-list" *ngIf="!readonly">

        <a class="btn mr-3" *ngFor="let item of navBtns; let i = index" [class.btn-primary]="tab===i+1"
            [class.btn-default]="tab!==i+1" (click)="setTab(i+1)">{{item}}</a>
    </div>
    <!-- data-hacker-class-mat-select-disabled="{this.disableMode}" -->
    <ng-container [ngSwitch]="tab">

        <!-- <span [innerHTML]="teleportHtml4CheckedPeriodUnit">

        </span> -->
        
        <span data-hacker-teleport-disabled="checked_period_unitStickerParent"
        data-hacker-class-mat-form-field-disabled="{this.disableMode}"
         class="dbx-abcdeeeeeee mat-form-field-appearance-legacy">

        
        <mat-form-field data-hacker-css="pointer-events:{this.disableMode?'none':'initial'};" class="garbage-abcdefg"
        
        data-hacker-show="{this.WITH_NEXT_FEATURE}" style="margin-left:10px;" 
            data-hacker>
                <mat-select data-hacker-class-mat-select-disabled="{this.disableMode}"
                 [(ngModel)]="checked_period_unitModel" (ngModelChange)="checked_period_unitModelChange()" value="d">
                    <mat-option *ngFor="let opt of checked_period_unitOptions" [value]="opt.value">{{opt.label}}</mat-option>
                </mat-select>
            </mat-form-field>
        <!-- </div> -->
    </span>

        

        <form [formGroup]="confForm" *ngSwitchCase="1">
            <div class="form-group row" formGroupName="iptables">
                <div class="col-3">
                    <label for="">防火墙配置：</label>
                </div>
                <div class="col-9 iptables">
                    <perfect-scrollbar>
                        <m-iptable-edit formControlName="content"></m-iptable-edit>
                    </perfect-scrollbar>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3">
                    <label for=""></label>
                </div>
                <div class="col-9 iptables tips">
                    提示：终端计算机的{{notAllowedPorts}}端口用于域管客户端与服务器连接，请勿禁用，否则会导致区内终端失去连接。
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3">
                    <label for="" class="mt-3">屏幕保护：</label>
                </div>
                <div class="col-9 d-flex align-items-center">
                    <m-screensaver formGroupName="screensaver"></m-screensaver>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3">
                    <label for="" class="mt-3">屏保文件：</label>
                </div>
                <div class="col-9 d-flex align-items-center">
                    <!-- screensaver_file_path -->
                    <m-script-input formGroupName="screensaver_file_path" [nameSuffixNot]="null"></m-script-input>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3">
                    <label for="" class="mt-3">关闭屏幕：</label>
                </div>
                <div class="col-9">
                    <m-display-standby formGroupName="power"></m-display-standby>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3">
                    <label for="" class="mt-3">密码强度：</label>
                </div>
                <div class="col-9">
                    <m-password-strength formGroupName="pam_cracklib"></m-password-strength>
                </div>
            </div>
            <div class="form-group row" formGroupName="wallpaper">
                <div class="col-3">壁纸设定：</div>
                <div class="col-9">
                    <m-image-preview [control]="wallpaper" formControlName="image" class="wallpaper">
                        <input type="file" accept="image/*" #wallpaper />
                    </m-image-preview>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3">执行脚本：</div>
                <div class="col-9">
                    <m-script-input formGroupName="script" [nameSuffixNot]="nameSuffixNot"></m-script-input>
                </div>
            </div>
            <div class="form-group row" formGroupName="clock_sync_config">
                <div class="col-3">
                    <label for="" class="mt-3">时钟同步：</label>
                </div>
                <div class="col-9 d-flex align-items-center">
                    <m-switch-checkbox formControlName="sync_switch"></m-switch-checkbox>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3">
                    <label for="" class="mt-3">同步周期：</label>
                </div>
                <!-- data-hacker-value="{this.clockModel.checked_period}" -->
                <div class="col-9 d-flex align-items-center" data-hacker="{id:'checked_period_unitStickerParent'}">
                    
                    <!-- <input data-hacker-model="{this.clockModel.checked_period}"
                     type="number" data-hacker-show="{this.WITH_NEXT_FEATURE}" _ngcontent-fqw-c13=""
                     class="form-control ng-untouched ng-pristine" 
                     style="width:100px;margin-right:20px;"
                     
                    data-hacker="{id:'testt'}"
                    max="10000"
                    min="1"
                     ng-reflect-name="ntp_server"
                     data-hacker-disabled="{this.disableMode?true:false}" /> -->


                     <span formGroupName="clock_sync_config">
                        <input
                     
                        formControlName="checked_period"
                        type="number" 
                        class="form-control ng-untouched ng-pristine" 
                        style="width:100px;margin-right:20px;"
                        
                       
                       max="10000"
                       min="1"
                         />
                     </span>

                     
                    


                    <!-- <span style="margin-left:10px;"></span> -->
                    <!-- {{BX_MODE}}---- -->
                    
                    <!-- <div formGroupName="clock_sync_config">

                        <input  formControlName="checked_period_unit"/>
                    </div> -->
                    
                    <mat-form-field formGroupName="clock_sync_config">


                        

                        <mat-select formControlName="checked_period_unit" value="checked_period_unit">
                            <mat-option *ngFor="let opt of checked_period_unitOptions" [value]="opt.value">{{opt.label}}</mat-option>
                        </mat-select>
                    </mat-form-field>


                    <!-- <mat-form-field data-hacker-show="{!this.WITH_NEXT_FEATURE}" formGroupName="clock_sync_config">
                        <mat-select formControlName="checked_period" value="checked_period">
                            <mat-option *ngFor="let opt of sync_period" [value]="opt">{{opt}}天</mat-option>
                        </mat-select>
                    </mat-form-field> -->
                </div>
            </div>
            <div class="form-group row" formGroupName="clock_sync_config">
                <div class="col-3">
                    <label for="" class="mt-3">NTP服务器：</label>
                </div>
                <div class="col-9 d-flex align-items-center">
                    <input formControlName="ntp_server" type="text" class="form-control" #input />
                </div>
            </div>
        </form>

        <m-advanced-setting-form *ngSwitchCase="2" [metas]="advancedSettingMetas"
            [advancedSettingForm]="advancedSettingForm"></m-advanced-setting-form>
        <!-- 
    <form [formGroup]="preInstForm" *ngSwitchCase="3" style="max-width: 1200px;">
      <m-pre-install [editing]="!editing" [dataList]="preInstAppAll" formControlName="preInstalledApp" headText="预装应用">
      </m-pre-install>
    </form> -->

        <m-restricted-app-form *ngSwitchCase="3" [restrictedForm]="restrictedForm"></m-restricted-app-form>
        <!-- <form [formGroup]="restrictedForm" style="max-width: 1200px;" *ngSwitchCase="4" id="restictApp">
      <div class="form-group row align-items-center">
        <div class="col-2 mt-2">
          <label for="script">限制策略</label>
        </div>
        <div class="col-3">
          <mat-form-field>
            <mat-select formControlName="limit_policy">
              <mat-option [value]="0">禁用</mat-option>
              <mat-option [value]="1">白名单</mat-option>
              <mat-option [value]="2">黑名单</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="ml-3">
          <i class="material-icons" attr.alt="可以通过黑白名单的方式允许或限制应用的使用"
            attr.title="可以通过黑白名单的方式允许或限制应用的使用">error_outline</i>
          <span>可以通过黑白名单的方式允许或限制应用的使用</span>
        </div>
      </div>
      <m-restrict-app *ngIf="limit_software_hidden" [editing]="!editing" formControlName="limit_software"
        [headText]="rstrHeadText">
      </m-restrict-app>
    </form> -->

        <form [formGroup]="repairForm" *ngSwitchCase="4">
            <div class="form-group row">
                <div class="col-3">
                    <label for="">防火墙配置：</label>
                </div>
                <div class="col-9 iptables">
                    <perfect-scrollbar>
                        <m-iptable-edit formControlName="content"></m-iptable-edit>
                    </perfect-scrollbar>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3">
                    <label for=""></label>
                </div>
                <div class="col-9 iptables tips">
                    当设备完整性检测未通过时，会执行修复区中的防火墙配置，直到完整性检测通过后恢复到原来的防火墙状态。
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3">
                    <label for=""></label>
                </div>
                <div class="col-9 iptables tips">
                    提示：终端计算机的{{notAllowedPorts}}端口用于域管客户端与服务器连接，请勿禁用，否则会导致区内终端失去连接。
                </div>
            </div>
        </form>

        <form [formGroup]="compVerifyForm" *ngSwitchCase="5" style="max-width: 900px;">
            <div class="form-group row align-items-center">
                <div class="col-2 mt-2">
                    <label for="script">合规性检查</label>
                </div>
                <div class="col-6">
                    <m-switch-checkbox [disabled]="compVerifyForm.invalid" formControlName="enabled">
                    </m-switch-checkbox>
                </div>
            </div>
            <div class="form-group row align-items-center">
                <div class="col-2 mt-2">
                    <label for="script">合规性检查脚本</label>
                </div>
                <div class="col-6">
                    <m-script-input id="compVerify" formGroupName="compVerify" (select)="fetchCompVerifyContent($event)"
                        (clear)="markAsDirty()" [nameSuffixNot]="['sh', 'py']">
                    </m-script-input>
                </div>
            </div>
            <div class="form-group row align-items-center">
                <div class="col-2 mt-2">
                    <label for="guide-page">修复引导页</label>
                </div>
                <div class="col-6">
                    <m-script-input id="repaireGuide" formGroupName="repaireGuide"
                        (select)="fetchRepaireGuideContent($event)" (clear)="markAsDirty()"
                        (view)="routeToRepairGuidePage($event)" [nameSuffixNot]="['html']" viewBtnText="查看">
                    </m-script-input>
                </div>
            </div>
            <div class="form-group row align-items-center">
                <div class="col-2 mt-2">
                    <label for="script">内外网互联控制</label>
                </div>
                <div class="col-1">
                    <m-switch-checkbox [disabled]="compVerifyForm.invalid" formControlName="netSwitch">
                    </m-switch-checkbox>
                </div>
                <div class="ml-3 mt-2">
                    <i class="material-icons" [attr.alt]="''"
                        [attr.title]="'启用配置，区内终端在内外网同时连接的情况下会收到警告，并断开内网连接'">error_outline</i>
                </div>
            </div>
            <div class="form-group row align-items-center" *ngIf="compVerifyForm.get('netSwitch').value;">
                <div class="col-1 mt-2">
                    <label for="script">内网IP</label>
                </div>
                <div class="col-3 col-10">
                    <input formControlName="intranetNetworkIps" type="text" class="form-control" />
                </div>
                <div class="ml-3 mt-2">
                    <i class="material-icons" [attr.alt]="''"
                        [attr.title]="'内网可访问的IP或域名，可配置多个，英文逗号分隔'">error_outline</i>
                </div>
            </div>
            <div class="form-group row align-items-center" *ngIf="compVerifyForm.get('netSwitch').value">
                <div class="col-1 mt-2">
                    <label for="script">外网IP</label>
                </div>
                <div class="col-10">
                    <input formControlName="outsideNetworkIps" type="text" class="form-control" />
                </div>
                <div class="ml-3 mt-2">
                    <i class="material-icons" [attr.alt]="''"
                        [attr.title]="'外网可访问的IP或域名，可配置多个，英文逗号分隔'">error_outline</i>
                </div>
            </div>
        </form>
        <!-- 认证配置 -->
        <form [formGroup]="authConfigForm" *ngSwitchCase="6" style="max-width: 900px;">
            <div class="form-group row align-items-center">
                <div class="col-3 mt-2 mt-2">
                    <label for="script">个人设备限制用户登陆</label>
                </div>
                <div class="col-1 mt-2">
                    <m-switch-checkbox [disabled]="authConfigForm.invalid" formControlName="personalLoginSwitch">
                    </m-switch-checkbox>
                </div>
                <div class="ml-3 mt-3">
                    <i class="material-icons" [attr.alt]="''"
                        [attr.title]="'启用配置，区域内个人设备会限制登录用户数量，允许在“允许登录用户”清单的用户使用该终端'">error_outline</i>
                </div>
            </div>
        </form>
    </ng-container>
</m-card>